<template>
  <dtDialog
    title="新增监控"
    :visible.sync="dialogVisible"
    width="1000px"
    :is-loading="formloading"
    @closeDialog="handleCancel"
    @comfirmBtn="onSubmit()"
  >
    <div class="table-container table-fullscreen">
      <div class="table-opt-container dialog-filter-flex">
        <el-form ref="filterFormRef" :inline="true" :model="queryParams">
          <el-form-item label="监控名称" prop="monitorName">
            <el-input
              v-model.trim="queryParams.monitorName"
              placeholder="请输入监控名称"
              style="width:150px;"
              maxlength="30" />
          </el-form-item>
          <el-form-item label="上游系统" prop="systemId">
            <el-select v-model.trim="queryParams.systemId" filterable placeholder="请选择上游系统">
              <el-option
                v-for="(item) in systemList"
                :key="item.systemId"
                :label="item.systemName"
                :value="item.systemId"
                style="width:150px;"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="监控编码" prop="monitorCode">
            <el-input
              v-model.trim="queryParams.monitorCode"
              placeholder="请输入监控编码"
              style="width:150px;"
              maxlength="30" />
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <div>
          <el-button type="primary" @click="handleFilter">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>
      <dt-table
        v-if="dialogVisible"
        v-loading="loading"
        :table-opts="tableOpts"
        :is-show-column="false"
        :pagination-data="{
          total: total,
          queryParams: queryParams,
        }"
        @handleSelectionChange="handleSelection"
        @pagination="getList"
      />
    </div>
  </dtDialog>
</template>

<script>
import { getAddGroupMonitorPage, addVideoGroupMonitor } from '@/api/videoFusion/monitorGroup'
import { qryUserSystemAuth as getSystemName } from '@/api/videoFusion/upstreamAccess'

export default {
  data() {
    return {
      queryParams: {
        monitorName: '',
        systemId: '',
        monitorCode: '',
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      loading: false,
      formloading: false,
      tableOpts: {
        configPagination: '1',
        rowKey: 'monitorId',
        firstTableCol: {
          select: true,
          width: 40
        },
        indexTableCol: {
          label: '序号'
        },
        tableCol: [
          {
            prop: 'monitorName',
            label: '监控名称',
            show: true
          },
          {
            prop: 'monitorCode',
            label: '监控编码',
            show: true
          },
          {
            prop: 'systemName',
            label: '接入系统',
            show: true
          }
        ],
        tableData: []
      },
      dialogVisible: false,
      selectList: [],
      systemList: []
    }
  },
  mounted() {
    this.getSystemList()
  },
  methods: {
    handleCancel() {
      this.queryParams = {
        name: '',
        pageNo: 1,
        pageSize: 10
      }
    },
    open(groupId) {
      this.groupId = groupId
      this.dialogVisible = true
      this.getList()
    },
    // 搜索
    handleFilter() {
      this.getList()
    },
    // 重置
    handleReset() {
      this.queryParams = {
        monitorName: '',
        systemId: '',
        monitorCode: '',
        pageNo: 1,
        pageSize: 1000
      }
      this.handleFilter()
    },
    getList() {
      this.loading = true
      getAddGroupMonitorPage({
        groupId: this.groupId,
        ...this.queryParams
      }).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleSelection(selection) {
      this.selectList = selection
    },
    onSubmit() {
      if (this.selectList.length > 0) {
        // 提交
        const data = {
          groupId: this.groupId,
          monitorIds: this.selectList.map((item) => {
            return item.monitorId
          })
        }
        // console.log(data)
        this.formloading = true
        addVideoGroupMonitor(data).then((res) => {
          this.$message.success(res.message)
          this.$emit('success')
          this.formloading = false
          this.dialogVisible = false
        }).catch(() => {
          this.formloading = false
        })
      } else {
        this.$dtModal.msgWarning('请至少选择一条数据')
      }
    },
    getSystemList() {
      getSystemName().then((res) => {
        this.systemList = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-filter-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  button {
    margin-bottom: 24px;
  }
}
</style>
